<script setup lang="ts">
import {
	ArrowLeft,
	ArrowRight,
	Delete,
	Edit,
	Share,
} from '@element-plus/icons-vue'

import UnityWebgl from 'Unity-webgl';
import VueUnity from 'Unity-webgl/vue'
import {onBeforeUnmount, onMounted, reactive, ref} from "vue";

const Unity = new UnityWebgl({
	loaderUrl: './src/Build/app.loader.js',
	dataUrl: "./src/Build/app.data",
	frameworkUrl: "./src/Build/app.framework.js",
	codeUrl: "./src/Build/app.wasm",
})

Unity.on('device', () => alert('click device ...'))

const isShow = ref(false)
const text = ref('')


const canvasRef = ref<any>(null)
let unityComponent: any = null

const formData = reactive({
	name: '',
	region: '',
	type: '',
})

const handleClick = () => {

}

const showComputer = () => {
	isShow.value = true

}

const closeComputer = () => {
	isShow.value = false
}

const jstounity = () => {
	unityComponent.send("UIInitialize", "EnterCasePage1", "WebToUnity")
}

onMounted(() => {
	if (!unityComponent) {
		unityComponent = new UnityWebgl(canvasRef.value, {
			loaderUrl: './src/Build/app.loader.js',
			dataUrl: "./src/Build/app.data",
			frameworkUrl: "./src/Build/app.framework.js",
			codeUrl: "./src/Build/app.wasm",
		})
	}

	unityComponent.on('Unity2JavaScript', (data: any) => {
		console.log(data)
	})

	unityComponent.emit('Unity2JavaScript', 'qqqq')



})

onBeforeUnmount(() => {
	if (unityComponent) {
		unityComponent.destroy()
		unityComponent = null
	}
})

</script>

<template>
	<div class="unity-web-app">
		<div class="menu-wrapper">
			<el-button-group class="ml-4 btn-group">
				<el-button type="primary" :icon="Edit" @click="showComputer"/>
				<el-button type="primary" :icon="Delete" @click="closeComputer" />
				<el-button type="primary" :icon="Share" @click="jstounity" />
			</el-button-group>

			<div v-if="isShow" class="form-wrapper" @click="handleClick">
				<div class="form-inner">
					<el-form
						label-width="100px"
						:model="formData"
						style="max-width: 460px; margin: 20px"
					>
						<el-form-item label="Name">
							<el-input v-model="formData.name" />
						</el-form-item>
						<el-form-item label="Activity zone">
							<el-input v-model="formData.region" />
						</el-form-item>
						<el-form-item label="Activity form">
							<el-input v-model="formData.type" />
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<!--	<iframe src="http://192.168.0.198:9090/" width="1000" height="600"></iframe>-->

		<div class="unity-wrapper">
			<div class="unity-inner">
				<canvas id="canvas" ref="canvasRef" style="width: 100%; height: 100%" />
			</div>
		</div>


		<!--	<VueUnity :unity="Unity" width="1920" heighht="1080" />-->
	</div>
</template>

<style scoped>
.unity-web-app {
	width: 100vw;
	height: 100vh;
	position: relative;

}

.menu-wrapper {
	position: relative;
}

.btn-group {
	position: absolute;
	top: 30px;
	left: 100px;
}

.form-wrapper {
	position: absolute;
	top: calc(50vh - 337.5px);
	left: calc(50vw - 600px);
	width: 200px;
	height: 675px;
	background: #e9edfa;
}

.unity-wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.unity-inner {
	width: 1200px;
	height: 675px;
	border: 30px groove #f8d150;
}

</style>
